// 弹窗选中组件 弹出窗的按钮
<template>
    <a-row class="j-select-component-box" type="flex" :gutter="8">
        <a-col class="left" :class="{'full':!buttons}">
            <slot name="left">
                <a-select 
                     mode="multiple"
                    :placeholder="placeholder"
                     v-model="selectValue"  
                    :options="selectOptions"  
                     allowClear
                    :disabled="disabled"
                    :open="selectOpen"
                     style="width: 100%"
                     @dropdownVisibleChange="handleDropdownVisibleChange"
                     @click.native="visible=(buttons || disabled ? visible: true)"
                />
            </slot>
        </a-col>

        <a-col v-if="buttons" class="right">
            <a-button type="primary" icon="search" :disabled="disabled" @click="visible=true">{{selectButtonText}}</a-button>
        </a-col>
    </a-row>
</template>
<script>
export default {
    name: 'JSelectComponent',
    props: {
        value: {
            type: String,
            default: ''
        },
        returnId: {
            type: Boolean,
            default: false
        },
        placeholder: {
            type: String,
            default: '请选择'
        },
        disabled: {
            type: Boolean,
            default: false
        },
        // 是否支持多选 默认为true
        mutiple: {
            type: Boolean,
            default: true
        },
        // 是否显示按钮 默认为true
        buttons: {
            type: Boolean,
            default: true
        },
        // 显示key
        displayKey: {
            type: String,
            default: null
        },
        // 返回key
        returnKeys: {
            type: String,
            default: null
        },
        // 选择按钮的文字
        selectButtonText: {
            type: String,
            default: '选择'
        }
    },
    data() {
        return {
            // 选中的数据数组
            selectValue: [],
            selectOptions: [],
            selectOpen: false
        }
    },
    methods: {
        handleOptions() {},
        handleDropdownVisibleChange() {},
    }
}
</script>
<style lang="less" scoped>
.j-select-component-box {

    @width: 82px;

    .left {
        width: calc(100% - @width - 8px);
    }
}
</style>